<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mathoid test-page</title>
    <style>
        input[type=text], select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid white;
            border-radius: 5px;
            box-sizing: border-box;
            resize: vertical;
        }

        input[type=submit] {
            background-color: lightgreen;
            color: black;
            padding: 10px 20px;
            margin-top: 5px;
            border: none;
            border-radius: 5px;
            float: right;
        }

        label {
            padding: 10px 10px 10px 0;
            display: inline-block;
        }

        .container {
            border-radius: 5px;
            background-color: lightgrey;
            padding: 20px;
        }

        .col25 {
            float: left;
            width: 25%;
            margin-top: 6px;
        }

        .col75 {
            float: left;
            width: 75%;
            margin-top: 6px;
        }

        .col37 {
            float: left;
            width: 37.5%;
            margin-top: 6px;
        }

        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        @media screen and (max-width: 600px) {
            .col25, .col75, input[type=submit] {
                width: 100%;
                margin-top: 0;
            }
        }

        @media screen and (max-width: 600px) {
            .col25, .col37, .col37 {
                width: 100%;
                margin-top: 0;
            }
        }
    </style>
</head>
<body onload="post()">
<h2>mathoid test-page</h2>
<p>This page provides a simple test interface to mathoid.
    <a href="https://github.com/wikimedia/mathoid">Find the source on GitHub.</a>
</p>
<h3>Request</h3>
<div class="container">
    <form onsubmit="post(); return false;">
        <div class="row">
            <div class="col25">
                <label for="type">type (input format)</label>
            </div>
            <div class="col75">
                <select id="type">
                    <option value="TeX" selected>TeX</option>
                    <option value="chem">chem</option>
                    <option value="inline-TeX">inline-TeX</option>
                    <option value="MathML">MathML</option>
                    <option value="AsciiMath">AsciiMath</option>
                </select>
            </div>
        </div>
        <div class="row">
            <div class="col25">
                <label for="q">q (content of the math tag)</label>
            </div>
            <div class="col75">
                <textarea id="q" style="height:50px">{\displaystyle e^{i\pi} + \frac12 = -\frac12   }</textarea>
            </div>
        </div>
        <div class="row">
            <div class="col25">
                <label for="nospeech">nospeech</label>
            </div>
            <div class="col75">
                <input type="checkbox" id="nospeech" value="true">
            </div>
        </div>
        <div class="row">
            <input type="submit" value="Submit">
        </div>
    </form>
</div>
<h3>Request</h3>
<div class="container">
    <div class="row">
        <div class="col25">
            <label for="mmlRes">MathML</label>
        </div>
        <div class="col37" id="mmlRes"></div>
        <div class="col37" id="mmlResC"></div>
    </div>
    <div class="row">
        <div class="col25">
            <label for="svgRes">SVG</label>
        </div>
        <div class="col37" id="svgRes"></div>
        <div class="col37" id="svgResC"></div>
    </div>
    <div class="row">
        <div class="col25">
            <label for="styleRes">style</label>
        </div>
        <div class="col37">
            <pre id="styleRes"></pre>
        </div>
        <div class="col37">
            <pre id="styleResC"></pre>
        </div>
    </div>
    <div class="row">
        <div class="col25">
            <label for="checkedRes">checked</label>
        </div>
        <div class="col75">
            <pre id="checkedRes"></pre>
        </div>
    </div>
</div>
<br/>
</body>
<script lang="javascript">

    async function post() {
        document.getElementById('mmlRes').innerText = "";
        document.getElementById('mmlResC').innerText = "";
        document.getElementById('svgRes').innerText = "";
        document.getElementById('svgResC').innerText = "";
        document.getElementById('styleRes').innerText = "";
        document.getElementById('styleResC').innerText = "";
        document.getElementById('checkedRes').innerHTML = "";

        function getReqBody(checked) {
            return [].reduce.call(document.forms.item(0).elements, (X, x) => {
                if (x.id) {
                    if (x.id === 'q' && checked) {
                        X += x.id + '=' + encodeURIComponent(checked) + '&';
                    } else {
                        X += x.id + '=' + encodeURIComponent(x.value) + '&';
                    }
                }
                return X
            }, '');
        }

        async function updateImages(body, postfix = '') {
            let response = await fetch('/complete', {
                method: 'POST',
                headers: {'Content-type': 'application/x-www-form-urlencoded'},
                body: body
            });
            let json = await response.json();
            if (response.ok) {
                document.getElementById('mmlRes' + postfix).innerHTML = json.mml.body;
                document.getElementById('svgRes' + postfix).innerHTML = json.svg.body;
                document.getElementById('styleRes' + postfix).innerText = json.mathoidStyle;
            } else {
                document.getElementById('checkedRes').innerHTML = JSON.stringify(json, null, 2);
            }
            return response;
        }


        let response = await updateImages(getReqBody());
        if (response.ok) {
            response = await fetch('/texvcinfo', {
                method: 'POST',
                headers: {'Content-type': 'application/x-www-form-urlencoded'},
                body: getReqBody()
            });
            if (response.ok) {
                let json = await response.json();
                document.getElementById('checkedRes').innerHTML = JSON.stringify(json, null, 2);
                if (json.checked) {
                    await updateImages(getReqBody(json.checked), 'C');
                }
            } else {
                let json = await response.json();
                document.getElementById('checkedRes').innerHTML = JSON.stringify(json, null, 2);
            }
        }
    }
</script>
</html>